<template>
    <div class="shape-edit">
        <el-tabs v-model="active">
            <el-tab-pane label="属性" name="1">
                <DynamicForm v-show="curComponent" ref="df" :schema="schema" :formData="formData">
                    <template v-slot:submit>
                        <span></span>
                    </template>
                </DynamicForm>
            </el-tab-pane>
            <el-tab-pane label="笼架" name="2">
                <div v-show="curComponent">
                    <div class="shelf" v-for="(item, index) in shelfComponentList" :key="index" :style="getShelfStyle(item.style)">
                        <span>{{item.label}}</span>
                        <div class="shelf-mark" @click="addShelf(item)">
                            <span>添加</span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <span v-if="!curComponent">请选择</span>
        </el-tabs>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { deepCopy } from '@/utils/grids/util';

export default {
    data() {
        return {
            active: '1',
            schema: {
                properties: {
                    label: {
                        label: '名称',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入'
                        },
                        on: {
                            blur: this.attrChange
                        }
                    },
                    width: {
                        label: '宽',
                        widget: 'inputNumber',
                        ui: {
                            min: 0,
                            max: 10000,
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    height: {
                        label: '高',
                        widget: 'inputNumber',
                        ui: {
                            min: 0,
                            max: 10000,
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    left: {
                        label: '距左',
                        widget: 'inputNumber',
                        ui: {
                            max: 10000,
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    top: {
                        label: '距上',
                        widget: 'inputNumber',
                        ui: {
                            max: 10000,
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    rotate: {
                        label: '旋转',
                        widget: 'inputNumber',
                        ui: {
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    borderTop: {
                        label: '上边框',
                        widget: 'inputNumber',
                        ui: {
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    borderRight: {
                        label: '右边框',
                        widget: 'inputNumber',
                        ui: {
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    borderBottom: {
                        label: '下边框',
                        widget: 'inputNumber',
                        ui: {
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                    borderLeft: {
                        label: '左边框',
                        widget: 'inputNumber',
                        ui: {
                            precision: 0,
                            controlsPosition: 'right',
                        },
                        on: {
                            change: this.properyChange
                        }
                    },
                },
                ui: {
                    labelWidth: 'auto'
                },
            },
            formData: {},
            shelfComponentList: [
                {
                    component: 'animal-shelf',
                    label: '笼架',
                    propValue: '双击编辑文字',
                    icon: 'wenben',
                    style: {
                        top: 0,
                        left: 0,
                        width: 50,
                        height: 50,
                        rotate: 0,
                        color: '',
                        backgroundColor: '#F2F3F7',
                        borderTop: 1,
                        borderRight: 1,
                        borderBottom: 1,
                        borderLeft: 1
                    },
                    children: []
                }
            ]
        }
    },
    watch: {
        curComponent: {
            deep: true,
            handler(value) {
                this.formData = {
                    label: value ? value.label : '',
                    ...value ? value.style : null
                }
            }
        }
    },
    computed: {
        ...mapState({
            curComponent: state => state.grids.curComponent,
        }),
    },
    methods: {
        attrChange(e) {
            this.$store.dispatch('setCurComponentAttr', {
                label: e.target.value
            })
        },
        properyChange(e) {
            this.$store.dispatch('setShapeStyle', this.$refs.df.values)
        },
        getShelfStyle(style) {
            const result = {};
            ['width', 'height', 'top', 'left', 'rotate', 'backgroundColor'].forEach(attr => {
                if (['width', 'height', 'top', 'left', 'rotate'].indexOf(attr) != -1) {
                    result[attr] = style[attr] + 'px'
                } else if(attr === 'rotate') {
                    result.transform = 'rotate(' + style[attr] + 'deg)'
                }else {
                    result[attr] = style[attr]
                }
            })
            return result
        },
        addShelf(item) {
            this.$store.dispatch('setCurComponentChildren', {
                mode: 'push',
                value: deepCopy(item)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.shelf{
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;

    &:hover{
        .shelf-mark{
            transform: translateY(0%);
        }
    }
}
.shelf-mark{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0, .5);
    transform: translateY(100%);
    transition: .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
</style>